<template>
  <view>
    <div class="box2">
      <div class="box3" v-for="(item, index) in logindata" :key="index">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
          "
          @click="activepic(index)">
          <image :src="item.icon" mode="scaleToFill" class="pic" />
          <div
            style="
              font-weight: bold;
              font-size: 48rpx;
              color: rgb(255, 99, 6);
              margin-left: 30rpx;
            ">
            {{ item.Text }}
          </div>
          <div
            style="position: absolute; left: -1rpx; top: -2rpx"
            v-if="actindex == index ? true : false">
            <image
              src="https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/dfec6f35-cf0b-4452-a6cf-4b9eb94e3a04.png"
              mode="scaleToFill"
              style="width: 96rpx; height: 96rpx" />
          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script setup>
import { UseTypestore } from '@/stores/index'
const store = UseTypestore()
const logindata = ref([
  {
    icon: 'https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/4b43531b-6be7-483d-af03-84518efceaec.png',
    Text: '我是站长'
  },
  {
    icon: 'https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/a261446e-798e-4a00-bc90-688de5892d3a.png',
    Text: '我是骑手'
  },
  {
    icon: 'https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/380efe99-c4e5-423d-9db3-76a1e7472294.png',
    Text: '我是商户'
  }
])
const actindex = ref(0)
const activepic = (index) => {
  actindex.value = index
  if (actindex.value == 0) {
    store.setWhichType(1)
    uni.redirectTo({
      url: '/pages/zhanzhangindex/index'
    })
  } else if (actindex.value == 1) {
    store.setWhichType(0)
    uni.redirectTo({
      url: '/pages/qishouindex/index'
    })
  } else {
    store.setWhichType(2)
    uni.redirectTo({
      url: '/pages/shangjiaindex/index'
    })
  }
}
</script>
<style>
page {
  background-image: url('');

  background-size: cover;
}

.box2 {
  width: 630rpx;
  position: absolute;
  top: 20%;
  left: 9%;
}

.box3 {
  width: 630rpx;
  height: 180rpx;
  border-radius: 40rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(255, 241, 233, 1) 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  box-shadow:
    0rpx 8rpx 8rpx rgba(255, 255, 255, 0.25) inset,
    0rpx -8rpx 10.4rpx 10rpx rgba(255, 255, 255, 0.25) inset;
  margin-top: 50rpx;
}

.pic {
  width: 56rpx;
  height: 56rpx;
}

.btn-box {
  width: 550rpx;
  height: 84rpx;
  border-radius: 42rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 120rpx auto;
  font-weight: 500;
  font-size: 32rpx;
  color: rgb(255, 255, 255);
}
</style>
